var submit = document.getElementById("submit");
var formContainer = document.getElementsByClassName('main')[0];

submit.addEventListener("click", init);

function createBootstrapSelect(id, label, options) {
    const div = document.createElement('div');
    div.className = 'form-group';

    const labelElement = document.createElement('label');
    labelElement.setAttribute('for', id);
    labelElement.textContent = label;

    const select = document.createElement('select');
    select.id = id;
    select.className = 'form-control';
    options.forEach(opt => {
        select.append(new Option(opt, opt));
    });

    div.appendChild(labelElement);
    div.appendChild(select);
    return div;
}

function createBootstrapInput(id, label, placeholder, type = 'text') {
    const div = document.createElement('div');
    div.className = 'form-group';

    const labelElement = document.createElement('label');
    labelElement.setAttribute('for', id);
    labelElement.textContent = label;

    const input = document.createElement('input');
    input.type = type;
    input.id = id;
    input.placeholder = placeholder;
    input.className = 'form-control';

    div.appendChild(labelElement);
    div.appendChild(input);
    return div;
}

function init() {
    formContainer.innerHTML = "";
    const card = document.createElement('div');
    card.className = 'card text-center mb-4';

    const cardHeader = document.createElement('div');
    cardHeader.className = 'card-header';
    cardHeader.textContent = '灾情信息输入';
    card.appendChild(cardHeader);
    formContainer.insertBefore(card, formContainer.firstChild);

    formContainer.appendChild(createBootstrapInput('location', '位置', '请输入位置'));
    formContainer.appendChild(createBootstrapInput('date', '日期', '请选择日期', 'text')); // 日期类型为text以初始化flatpickr

    // 添加来源选择框
    const sourceSelect = createBootstrapSelect('source', '来源', ['业务报送数据', '泛在感知数据', '其他']);
    formContainer.appendChild(sourceSelect);

    // 添加二级来源选择框
    const subSourceSelect = createBootstrapSelect('subSource', '详细来源', []);
    formContainer.appendChild(subSourceSelect);

    formContainer.appendChild(createBootstrapInput('dataCarrier', '数据载体', '请输入数据载体'));
    formContainer.appendChild(createBootstrapInput('category', '分类', '请输入分类'));
    formContainer.appendChild(createBootstrapInput('disasterIndicator', '灾情指标', '请输入灾情指标'));

    // 添加描述文本区域
    const textareaDiv = document.createElement('div');
    textareaDiv.className = 'form-group';
    const label = document.createElement('label');
    label.setAttribute('for', 'description');
    label.textContent = '描述';
    const description = document.createElement('textarea');
    description.id = 'description';
    description.placeholder = '请输入描述';
    description.className = 'form-control';
    textareaDiv.appendChild(label);
    textareaDiv.appendChild(description);
    formContainer.appendChild(textareaDiv);

    // 初始化 flatpickr 日期选择器
    flatpickr(document.getElementById('date'), {});

    const dataCarrierInput = document.getElementById('dataCarrier');
    dataCarrierInput.value = '文字'; // 设置显示的文字
    dataCarrierInput.disabled = true; // 禁用输入框

    $('#source').select2();
    $('#subSource').select2();

  // 定义二级选项
  const subOptions = {
    '业务报送数据': ["前方地震应急指挥部","后方地震应急指挥部","应急指挥技术系统","社会服务工程应急救援系统","危险区预评估工作组","地震应急指挥技术协调组","震后政府信息支持工作项目组",
    "灾情快速上报接收处理系统","地方地震局应急信息服务相关技术系统","其他业务报送数据"],
    '泛在感知数据': ["互联网感知","通信网感知","舆情网感知","电力系统感知","交通系统感知","其他范在感知数据"],
    '其他': []
  };

  $('#source').select2();
  $('#subSource').select2();

  // 监听来源选择框的变化
  $('#source').on('change', function() {
    const selected = this.value;
    const options = subOptions[selected] || [];
    const subSource = $('#subSource');
    subSource.empty(); // 清空现有选项
    if (options.length > 0) {
        subSource.append(new Option('请选择', '')); // 添加默认选项
    }
    options.forEach(opt => {
        subSource.append(new Option(opt, opt));
    });

    // 重新初始化 Select2 插件
    subSource.select2();
});
  const submitButton = document.createElement('button');
    submitButton.textContent = '提交';
    submitButton.className = 'btn btn-primary';
    submitButton.type = 'button'; // 防止默认的提交行为
    submitButton.onclick = submitForm; // 绑定点击事件到 submitForm 函数
    formContainer.appendChild(submitButton);  

}

function submitForm() {
    // 收集表单数据
    const formData = {
        location: document.getElementById('location').value,
        date: document.getElementById('date').value,
        source: document.getElementById('source').value,
        subSource: document.getElementById('subSource').value,
        category: document.getElementById('category').value,
        disasterIndicator: document.getElementById('disasterIndicator').value,
        description: document.getElementById('description').value
    };

    // 使用 AJAX 发送数据
    $.ajax({
        url: '/data/insertData', // 后端接收数据的 URL
        type: 'POST', // 请求类型
        contentType: 'application/json', // 发送数据的格式
        data: JSON.stringify(formData), // 将对象转换为 JSON 字符串
        success: function(response) {
            // 处理成功的回调
            console.log('提交成功', response);
        },
        error: function(xhr, status, error) {
            // 处理错误的回调
            console.error('提交失败', error);
        }
    });
}


